import React, {FC} from 'react';
import "./index.less";
import HxCyCard from "@/components/HxCyCard";
import {HxJournalMailItem} from "@/components/HxJournal";
import {useRequest} from "ahooks";
import * as API from "@/services";

interface MallJournalsGuessProps {
  journalId?: API.EntityId;
}

/**
 * 更多期刊订阅
 * 猜你喜欢, 推荐
 */
const MallJournalsGuess: FC<MallJournalsGuessProps> = (props) => {
  const {journalId} = props;

  const journalsReq = useRequest(() => API.queryFrontJournals({
    pageSize: 4,
    orderByRand: true,
    notExistsIds: journalId ? [journalId] : []
  }), {
    refreshDeps: []
  });

  const data = journalsReq.data?.data;


  return (
    <HxCyCard title={"更多期刊订阅"} size={"small"} className={"more-mall-product-card"}>
      {
        data?.map((item) => {
          return <HxJournalMailItem key={item.id} journal={item}/>
        })
      }
    </HxCyCard>
  );
};

export default MallJournalsGuess;
